<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>absolute+calc</title>
</head>
<style>
	.father {
		width: 200px;
		height: 200px;
		border: 1px solid black;
		position: relative;
	}

	.children {
		height: 50px;
		width: 50px;
		background-color: red;
		position: absolute;
		top: calc( 50% - 50px);
		left: calc( 50% - 50px);
	}
</style>

<body>

	<div class="father">
		<div class="children">123</div>
	</div>
	<script>
		let ele = document.querySelector('.father')
		setInterval(function () {
			ele.style.height = 170 + Math.random() * 60 + "px"
			ele.style.width = 150 + Math.random() * 100 + "px"
		}, 500)
	</script>
</body>

</html>